<template>
  <div>
    <mt-swipe :auto="2000">
      <mt-swipe-item v-for="item in LunboImgList" :key="item.imgSrc">
        {{item.imgName}}
        <img :src="item.imgSrc">
      </mt-swipe-item>
    </mt-swipe>
    <div class="mui-content">
      <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/home/NewsList">
            <!-- <span class="mui-icon mui-icon-home"></span> -->
            <img src="../../images/menu1.png" alt="新闻资讯">
            <div class="mui-media-body">新闻资讯</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/">
            <!-- <span class="mui-icon mui-icon-email">
              <span class="mui-badge">5</span>
            </span> -->
            <img src="../../images/menu2.png" alt="图片分享">
            <div class="mui-media-body">图片分享</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/cart">
            <img src="../../images/menu3.png" alt="商品购买">
            <div class="mui-media-body">商品购买</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/">
            <img src="../../images/menu4.png" alt="留言反馈">
            <div class="mui-media-body">留言反馈</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/">
            <img src="../../images/menu5.png" alt="视频专区">
            <div class="mui-media-body">视频专区</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/">
            <img src="../../images/menu6.png" alt="联系我们">
            <div class="mui-media-body">联系我们</div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { Toast } from "mint-ui";

export default {
  data() {
    return {
      LunboImgList: []
    };
  },

  components: {
  },

  computed: {},

  // mounted: {},

  methods: {
    getLunbo() {
      this.$http.jsonp("http://39.98.224.221:3000/jsonp").then(
        function(res) {
          this.LunboImgList = JSON.parse(res.bodyText);
          Toast("图片请求成功！");
        },
        function(err) {
          console.log(err);
          Toast("图片请求失败！");
        }
      );
    }
  },
  created() {
    this.getLunbo();
  }
};
</script>
<style lang="scss" scoped>
.mint-swipe {
  height: 200px;
}
.mint-swipe-item {
  // &:nth-child(1){
  //   background-color: blue;
  // }
  // &:nth-child(2){
  //   background-color: cyan;
  // }
  // &:nth-child(3){
  //   background-color: darkcyan;
  // }
  img {
    width: 100%;
    height: 100%;
  }
}
.mui-grid-view.mui-grid-9 {
  background-color: white;
  border: 0;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell {
  border: 0;
}
.mui-table-view-cell {
  img{
    width: 100%;
    height: 100%;
  }

}
</style>